<template>
    <div class="v-header-container">
        <div class="header-wrapper clearfix">
            <div class="header-nav">
                <div @click="get()">
                    <router-link to="/home/send">发送</router-link>
                </div>
                <div @click="get()">
                    <router-link to="/home/accept">接收</router-link>
                </div>
                <div>
                    <router-link to="/home/recharge">充值</router-link>
                </div>
                <div>
                    <router-link to="/home/transaction">撮合交易</router-link>
                </div>
                <div>
                    <router-link to="/home/history">历史</router-link>
                </div>
                <div>
                    <router-link to="/home/currency">常用货币</router-link>
                </div>
                <div>
                    <router-link to="/home/contract">智能合约</router-link>
                </div>
            </div>
            <div class="header-nav-right">
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        <icon class="icon icon-gear" name="gear"></icon>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <router-link to="/home/help">
                            <el-dropdown-item>
                                <icon class="icon icon-dropdown icon-question" name="question-circle-o"></icon>
                                帮助
                            </el-dropdown-item>
                        </router-link>
                        <router-link to="/home/privatekey">
                            <el-dropdown-item>
                                    <icon class="icon icon-dropdown icon-key" name="key"></icon>
                                    导出私钥
                            </el-dropdown-item>
                        </router-link>
                        <router-link to="/home/keystore">
                            <el-dropdown-item>
                                <icon class="icon icon-dropdown icon-briefcase" name="briefcase"></icon>
                                钱包备份
                            </el-dropdown-item>
                        </router-link>
                        <router-link to="/home/wallet">
                            <el-dropdown-item>
                                <icon class="icon icon-dropdown icon-lineChart" name="line-chart"></icon>
                                钱包导入
                            </el-dropdown-item>
                        </router-link>
                        <router-link to="/home/password">
                            <el-dropdown-item>
                                <icon class="icon icon-dropdown icon-unlockAlt" name="unlock-alt"></icon>
                                修改密码
                            </el-dropdown-item>
                        </router-link>
                        <router-link to="/home/relation">
                            <el-dropdown-item>
                                <icon class="icon icon-dropdown icon-user" name="user"></icon>
                                联系
                            </el-dropdown-item>
                        </router-link>
                        <router-link to="/home/privacy">
                            <el-dropdown-item>
                                <icon class="icon icon-dropdown icon-suitcase" name="suitcase"></icon>
                                隐私&条款
                            </el-dropdown-item>
                        </router-link>
                        <el-dropdown-item>
                            <icon class="icon icon-dropdown icon-power-off" name="power-off"></icon>
                            退出
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="tab-container">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import Icon from "../../../../node_modules/vue-awesome/components/Icon.vue";

    export default{
        components: {Icon},
        methods:{
            get(){

            }
        }
    }
</script>

<style>
    .v-header-container{
        width: 100%;
        height: 100%;
    }
    .header-wrapper{
        height: 60px;
        width: 100%;
        background: #fff;
    }
    .header-wrapper .header-nav{
        float: left;
        height: 100%;
    }
    .header-wrapper .header-nav > div{
        display: inline-block;
        cursor: pointer;
        height: 100%;
    }
    .header-nav a {
        display: inline-block;
        line-height: 60px;
        padding: 0 20px;
    }
    .header-wrapper .header-nav-right{
        float: right;
        width: 80px;
        height: 20px;
        margin: 20px 0;
        overflow: hidden;
    }
    .header-nav-right .el-dropdown{
        text-align: center;
        display: block;
    }
    .el-dropdown-menu{
        width: 200px;
    }
    .el-dropdown-menu__item a{
        display: inline-block;
        color: #606266;
    }
    .icon{
        display: inline;
        cursor: pointer;
    }
    .icon-question{
        margin-left: -2px;
        margin-right: 22px!important;
    }
    .icon-dropdown{
        width: 20px;
        height: 20px;
        float: left;
        margin-top: 8px;
        margin-right: 20px;
    }
    .icon-gear:hover{
        color: #0866b1;
    }
    .icon-gear:link{
        color: #0866b1;
    }
    .el-dropdown-menu__item{
        padding: 0 30px 0 40px;
    }
    .header-wrapper .header-nav > div > a{
        color: #000;
        font-size: 16px;
    }
    .header-wrapper .header-nav > div > a:hover{
        color: #0866b1;
    }
    .header-wrapper .header-nav .router-link-active{
        color: #0061ae;
    }
    .tab-container{
        width: 100%;
        height: 100%;
    }
</style>
